import { useState, useEffect, useContext } from 'react';
import { NavBar, List, Image, Toast } from 'antd-mobile';
import { CopyOutlined, QrcodeOutlined, ProfileFilled, SettingOutlined, SaveFilled } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import copy from 'copy-text-to-clipboard';

import AvatarImage from '../../../components/AvatarImage';
import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function() {
  const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);
  const [myInfo, setMyInfo] = useState({});

  useEffect(async () => {
    const info = await mySdkStore.sdk.queryUserInfoById({ queryUserId: mySdkStore.mockConfig.userId });
    setMyInfo(info);
  }, []);

  const copyUserId = (e) => {
    copy(myInfo.userId);
    Toast.show('复制成功');
    e.stopPropagation();
  }

  return (<div className="myInfoPage">
    <NavBar back={null} style={{ background: '#fff', border: 'none' }}>我的</NavBar>
    <List style={{ '--border-top': 0, '--border-bottom': 0 }}>
      <List.Item
        prefix={<AvatarImage
          style={{ borderRadius: '12px' }}
          src={myInfo.avatarUrl}
          nickName={myInfo.nickName}
          userName={myInfo.userName}
          userId={myInfo.userId} width={60} height={60} fit='fill' />}
          description={
            <div className="userId">
              ID: {myInfo.userId}
              <CopyOutlined style={{ marginLeft: 6, color: '#1890FF' }} onClick={copyUserId} />
            </div>}
        // extra={<QrcodeOutlined style={{ fontSize: 20 }} />}
        // onClick={() => { history.push({ pathname: 'modifyMyInfo' })}}
        >
        <div className="userName">{ myInfo.userName }</div>
      </List.Item>
    </List>
    {/* <div className="sloganArea">
      <div className="sloganLabel">
        个性签名
      </div>
      <div className="slogen">
        todo: 没有字段
        要知道对好事的称颂过于夸大，也会招来人们的反感轻蔑和嫉妒
      </div>
    </div> */}
    { !mySdkStore.isHideSomeFunctions &&
    <List style={{ margin: '12px 0 20px'}}>
      <List.Item onClick={() => history.push({ pathname: '/collectionList' })}>
        <div className="listIcon">
          <SaveFilled style={{ color: 'rgba(0,145,255,1)' }} />
        </div>
        我的收藏
      </List.Item>
      {/* <List.Item onClick={() => {}}>
        <div className="listIcon"><ProfileFilled style={{ color: 'rgba(253,127,44,1)'}} /></div>
        我的通话
      </List.Item> */}
    </List>
    }
    <List style={{ margin: '12px 0 20px'}}>
      <List.Item onClick={() => {history.push({ pathname: '/mySetting' })}}>
        <div className="listIcon"><SettingOutlined /></div>
        设置
      </List.Item>
    </List>
  </div>)
}